.wrapper{
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(to bottom,var(--welcom-bg-start) 0%,var(--welcom-bg-centent) 50%,var(--welcom-bg-end) 100%,);
>header{
    padding-top: 36px;
    flex-shrink:0 ;//不压缩
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #D4D4EE;
    >h1{
        color:#D4D4EE;
    }
    position: relative;
}
>main{
    position: relative;
    flex-grow: 1;//压缩
    display: flex;
    flex-direction: column;
    margin: 16px 16px 0 16px ;
    }
>footer{
    flex-shrink:0;
    
}
}
.slide_fade_enter_active,
.slide_fade_leave_active {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all var(--transition-direction) ease-out;
}

.slide_fade_enter_from {
  transform: translateX(100vw);
}
.slide_fade_leave_to {
  transform: translateX(-100vw);
}